<template>
  <div class="box">
    <header>
      <span class="back" @click="backSearch"></span>
      <input
        type="text"
        placeholder="搜索歌曲 / 歌手 / 专辑"
        v-model="value"
        @keydown.enter="keydown"
      />
      <span class="cleanIpt" @click="cleanIpt"></span>
    </header>
    <SearchSuggest v-if="active" :arr="arr" />
    <main v-else>
      <ul v-if="songs" @click="$emit('play-list', songs)">
        <li
          @click="jumpPlay(song.id)"
          v-for="(song, index) in songs"
          :key="song.id"
        >
          <div class="leftIndex" :class="{red:index<=2}">
            <span>{{ count(index) }}</span>
          </div>
          <div class="information">
            <h4 v-if="song.name">
              {{ song.name }}
            </h4>
            <p class="grayAlia">
              <span
                class="ar-name"
                v-for="artist in song.ar"
                :key="artist.id"
                >{{ artist.name }}</span
              >
              <span>{{ song.al.name }}</span>
            </p>
          </div>
          <span v-if="song.id != songId" class="bgPlay"></span>
          <div v-else class="play-pause">
            <span :class="{ running: playing, pause: !playing }"></span>
            <span :class="{ running: playing, pause: !playing }"></span>
            <span :class="{ running: playing, pause: !playing }"></span>
          </div>
        </li>
      </ul>
    </main>
  </div>
</template>

<script>
import SearchSuggest from "@/components/SearchSuggest.vue";
export default {
  components: {
    SearchSuggest,
  },
  props: {
    playing: Boolean,
    songId: Number,
  },
  data() {
    return {
      songs: [],
      value: this.$route.query.word,
      isAlbums: false,
      arr: [],
      active: false,
    };
  },
  methods: {
    jumpPlay(id) {
      this.$emit("play-audio", id);
    },
    backSearch() {
      this.$router.push({ path: "/search" });
    },
    cleanIpt() {
      this.value = null;
    },
    getSongs(word) {
      this.axios
        .get("https://apis.netstart.cn/music/cloudsearch?keywords=" + word)
        .then((res) => {
          this.songs = res.data.result.songs;
        });
    },
    keydown() {
      if (this.value.trim()) {
        this.$router.push({
          path: "/searchlist",
          query: {
            word: this.value,
          },
        });
      }
    },
    count(num){
      if((num+1)<10){
        return "0"+(num+1)
      }else{
        return num+1;
      }
    }
  },
  watch: {
    value(n) {
      if (n) {
        if (n.trim()) {
          this.active = true;
          this.axios
            .get(
              "https://apis.netstart.cn/music/search/suggest?keywords=" +
                n +
                "&type=mobile"
            )
            .then((res) => {
              this.arr = res.data.result.allMatch;
            });
        } else {
          this.active = false;
        }
      }
    },
    $route(to, from) {
      if (to.query.word != from.query.word) {
        this.getSongs(to.query.word);
        this.active = false;
      }
    },
    // '$route.query.word'(n){
    //   this.value = n;
    // }
  },
  created() {
    this.getSongs(this.$route.query.word);
    window.localStorage.getItem("historyArr")
      ? window.localStorage.setItem(
          "historyArr",
          window.localStorage.getItem("historyArr") +
            "," +
            this.$route.query.word
        )
      : window.localStorage.setItem("historyArr", this.$route.query.word);
    this.$emit("updata-history");
  },
};
</script>

<style lang="less" scoped>
@keyframes myplay {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}
.box {
  & > ul {
    position: static;
  }
}
header {
  position: relative;
  padding: 2vw;
  display: flex;
  align-items: center;
  .back {
    display: block;
    width: 20px;
    height: 20px;
    background: url("../assets/blackBack.png") no-repeat 0 0 / contain;
    margin-right: 3vw;
  }

  input {
    width: 86vw;
    line-height: 25px;
    border: 0;
    outline: none;
    font-size: 14px;
    border-bottom: 2px solid #a0a0a0;
  }
  .cleanIpt {
    position: absolute;
    top: 2vh;
    right: 3vw;
    display: block;
    width: 20px;
    height: 20px;
    background: url("../assets/clean.png") no-repeat 0 0 / contain;
  }
}
ul {
  background-color: white;
}
li {
  text-align: left;
  display: flex;
  justify-content: space-between;
  padding: 5px;
  padding-left: 40px;
  border-bottom: 1px solid #ebebeb;
  position: relative;
  align-items: center;
  height: 8vh;

  div:first-of-type {
    padding: 0px 15px 0px 10spx;
    align-self: center;
  }

  .bgPlay {
    background: url(../images/music.png) no-repeat -48px 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-self: center;
    transform: scale(0.6);
  }
  .play-pause {
    display: flex;
    align-items: center;
    margin-right: 13px;
    span {
      width: 4px;
      height: 20px;
      background-color: green;
      margin-left: 2px;
      position: relative;
      display: block;
      transform-origin: bottom;
      animation: myplay 0.9s linear infinite alternate;
      &.running {
        animation-play-state: running;
      }
      &.pause {
        animation-play-state: paused;
      }
    }
    span:nth-of-type(1) {
      animation-delay: -0.9s;
    }
    span:nth-of-type(2) {
      animation-delay: -0.6s;
    }
    span:nth-of-type(3) {
      animation-delay: -0.3s;
    }
  }
  .leftIndex {
    position: absolute;
    top: 20px;
    left: 15px;
    color: #a1a6bd;
  }
}
div.firstThree {
  color: #e13470;
}
.information {
  display: flex;
  flex-direction: column;
  flex: 1;

  h4 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
  }
  .grayAlia {
    color: #888897;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;

    .ar-name::after {
      content: " - ";
    }
    // .ar-name {
    //   &::after {
    //     content: " / ";
    //   }
    //   &:last-of-type {
    //     &::after {
    //       content: " - ";
    //     }
    //   }
    // }
  }

  p {
    display: flex;
    font-size: 12px;
    span {
      align-self: center;
    }
  }
}
.sq {
  background: url(../images/music.png) no-repeat 0 0;
  width: 24px;
  height: 16px;
  display: block;
  margin-right: 5px;
  transform: scale(0.6);
}
</style>